<template>
  <div class="productStyle">
    <van-nav-bar title=""
                 left-text=""
                 right-text=""
                 left-arrow
                 @click-left="onClickLeft" />
    <van-row class="icon">
      <van-col span=" 6">

        <div class="companyInfo">
          <div class="top">
            <div class="topMargin">
              <div class="bgc">
                <van-icon name="photo-o" />
              </div>
              <span class="text">新新产业园</span>
            </div>

          </div>
          <div class="bottom">
            <van-row>
              <van-col span="7">
                <van-image class="imgStyle"
                           width="65px"
                           height="65px"
                           :src="require('@/assets/background/productImg.png')" />
              </van-col>
              <van-col span="15">
                <div class="text14size objectTitle">Sunlike</div>
                <div class="textcolor">8577A00010089A</div>
                <div class="textcolor endTime">到期时间：<span> 2024-12-01</span></div>
              </van-col>
              <van-col span="2">
                <van-icon class="arrow"
                          name="arrow"
                          @click="toCustomerProduct()" />
              </van-col>
            </van-row>
          </div>
        </div>
        <van-tabs v-model="active"
                  @click="onClick"
                  class="menu-tabs"
                  animated>
          <van-tab v-for="index in functionBox"
                   :key="index.type"
                   :title="index.name"
                   class="tms">
            <!-- <div class="difBox">
              <div class="content">
                <van-image :src="icon"
                           class="icon" />
                <div class="text">
                  停用产品
                </div>
              </div>
            </div> -->
            <tabsContent ref="refTabsContent"
                         :type="active"></tabsContent>

          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>
    <van-submit-bar v-if="active===0||active===1||active===2"
                    class="submit"
                    :price="3050"
                    button-text="提交订单"
                    @submit="onSubmit" />
  </div>
</template>

<script>
import { Toast } from 'vant'
import tabsContent from '@/views/ProductOperate/component/tabsComponent.vue'
import icon from '@/assets/icon/svg/timeStop.svg'
export default {
  components: {
    tabsContent
  },
  methods: {
    onClickLeft () {
      Toast('返回')
      this.$router.go(-1)
    },
    toCustomerProduct () {
      this.$router.push({
        path: '/customerProduct',
        query: {
        }
      })
    },
    onClick () {
      console.log(this.active)
    },
    onSubmit () {
      console.log('提交')
      Toast(this.active)
    }
  },
  data () {
    return {
      active: 0,
      icon: icon,
      functionBox: [
        { name: '加购模块', type: '1' },
        { name: '续费', type: '2' },
        { name: '增加用户', type: '3' },
        { name: '清机器码', type: '4' },
        { name: '紧急授权', type: '5' },
        { name: '调整使用期', type: '6' },
        { name: '启用/停用', type: '7' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.productStyle {
  background-image: linear-gradient(to bottom, #abc1d4, #dde0e3);
  /deep/.menu-tabs .van-tab--active {
    // color: #ffffff; /* 字体颜色 */
    font-weight: 600;
    // background-color: #ff8917; /* 标签背景颜色 */
    // border-radius: 40px; /* 圆角标签背景 */
  }
  .text14size {
    font-size: 14px;
  }
  .textcolor {
    color: #686da0;
  }
  // /deep/.van-tabs__nav {
  //   background-color: rgba(255, 255, 255, 0);
  // }
  .van-nav-bar {
    background-color: rgba(255, 255, 255, 0) !important;
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0rem;
  }
  .tms {
    // background-color: rgba(255, 255, 255, 0) !important;
    background-color: #fff;
  }
}
.companyInfo {
  text-align: center;
  .van-tabs {
    background-color: #fff;
  }
  .top {
    .bgc {
      margin-right: 16px;
      margin-left: 6px;
      // margin-top: 8px;
      border-radius: 6px;
      font-size: 20px;
      display: inline-block;
      background-color: #eeeeee;
      width: 35px;
      height: 35px;
      text-align: center;
      vertical-align: middle;
      .van-icon {
        margin: 7px;
      }
    }
    .topMargin {
      margin-top: 5px;
      vertical-align: middle;
    }
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    margin: 0 30px;
    width: 295px;
    height: 42px;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px #eeeeee solid;
  }
  .bottom {
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    padding: 10px;
    margin: 0 30px 30px 30px;
    width: 295px;
    height: 80px;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    .objectTitle {
      margin-top: 14px;
    }
    .endTime {
      margin-top: 5px;
    }
    .imgStyle {
      margin: 8px;
    }
    .arrow {
      margin-top: 30px;
      font-size: 20px;
    }
  }
}
// /deep/.van-tabs__wrap {
//   height: 65px;
// }
/deep/.van-tabs--line .van-tabs__wrap {
  height: 50px;
}
.difBox {
  // padding: 25px;
  .content {
    background-color: #fff;
    .text {
      margin-top: 8px;
      font-size: 14px;
    }
  }
}
.backIcon {
  font-size: 130px;
  .icon {
    margin-top: 50px;
  }
}
</style>